import React, { Component } from 'react'
import './Scroll.scss'

export default class Scroll extends Component {
  constructor() {
    super()
    this.state = {
      num:1,
      list:[]
    }
  }
  // 模拟一个获取接口的方法
  getList(n) {
    for(let i = this.state.num;i<this.state.num+n;i++){
      this.state.list.push({
        value:i
      })
    }
    this.state.num += n
    this.setState({
      num:this.state.num,
      list:this.state.list
    })
    console.log(this.state.list)
  }
  componentDidMount() {
    this.getList(20)
  }
  // 滚动事件触发的方法
  scroll=(event)=>{
    // document.querySelector("box").clientHeight
    console.log(event.target)
    // 首先是整个的滚动高度
    console.log(event.target.scrollHeight)

    // 获取视口的高度
    console.log(event.target.clientHeight)
    console.log(event.target.offsetHeight)
    // 获取滚动条距离底部的距离
    console.log(event.target.scrollTop)
    if(event.target.scrollTop + event.target.clientHeight+20 >event.target.scrollHeight) {
      console.log("触底了")
      this.getList(5)
    }
  }
  render() {
    return (
      <div className='scroll-box'>
        <div className='box' onScroll={this.scroll}>
          {
            this.state.list.map((item,index)=>{
              return (
                <div key={index}>{item.value}</div>
              )
            })
          }

        </div>
      </div>
    )
  }
}
